$lgn-container-max-width: 440px;
$lgn-container-padding: 20px;
$lgn-container-margin: 0 auto 0 auto;
$lgn-container-top-offset: 100px;
$lgn-container-bottom-margin: 50px;

.lgn-max-width-wrapper {
  max-width: $lgn-container-max-width;
  margin: auto;
  margin-top: 50px;
  margin-bottom: $lgn-container-bottom-margin;
  display: block;

  @media only screen and (min-width: 600px) {
    margin-top: $lgn-container-top-offset;
  }
}

.content-container {
  position: relative; // used to position a button element relative to the left upper corner of the content wrapper
  display: block;
  margin: $lgn-container-margin;
  padding: $lgn-container-padding;
  width: 100%;
  box-sizing: border-box;

  .lgn-head {
    h1 {
      text-align: center;
    }

    p {
      text-align: center;
    }
  }

  .lgn-actions {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    margin-top: 1rem;

    // this is used to reverse the submit button order.
    //The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed.
    &.lgn-reverse-order {
      flex-direction: row-reverse;
    }

    // this is used to center content within the actions container
    // required when there is only one element within a lgn-actions container
    &.lgn-justify-center {
      justify-content: center;
    }

    .fill-space {
      flex: 1;
    }
  }

  .lgn-row {
    display: flex;
    align-items: center;
    padding: 0;

    // this is used to reverse the submit button order.
    //The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed.
    &.lgn-reverse-order {
      flex-direction: row-reverse;
    }

    .fill-space {
      flex: 1;
    }
  }

  .lgn-login-profile {
    margin-bottom: 0.5rem;

    .lgn-profile-image {
      display: block;
      margin: 0.5rem;
    }
    .lgn-names {
      border-width: 1px;
      border-style: solid;
      border-radius: 50vw;
      display: flex;
      align-items: center;

      .inline-block {
        display: inline-block;
        margin: 0 2px;
      }

      .lgn-displayname {
        margin: 0.5rem 1rem;
      }

      .lgn-loginname {
        min-width: 0;

        p {
          margin: 0.5rem 0.5rem;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }

  .lgn-left-action {
    position: absolute;
    left: 1rem;
    top: -75px;
    transform: translateY(-50%);
  }

  .lgn-register-options {
    display: flex;
    flex-direction: column;
  }

  .lgn-mfa-other {
    display: flex;
    flex-direction: column;

    button {
      width: 100%;
      margin: 0.5rem 0;
    }
  }
}

i {
  font-size: 1.2rem;
}
